<template>
	<cl-page statusBarBackground="#fff" background-color="#F1F1F1" :fullscreen="true">
		<cl-sticky>
			<cl-topbar
				:border="false"
				background-color="#fff"
				color="#333"
				:title="t('user.calling.calling')"
				:moreTit="t('user.calling.edit_')"
				@more="more"
			/>
		</cl-sticky>
		<view class="page-info animate__animated animate__fadeIn">
			<view class="list mt30">
				<view class="item flex flex-between align-center">
					<view class="left">{{ $t("user.calling.num") }}</view>
					<view class="right">冀E79U08</view>
				</view>
				<view class="item flex flex-between align-center">
					<view class="left">{{ $t("user.calling.possessor") }}</view>
					<view class="right">{{ $t("user.calling.username") }}</view>
				</view>
				<view class="item flex flex-between align-center">
					<view class="left">{{ $t("user.calling.brandL") }}</view>
					<view class="right">{{ $t("user.calling.car") }}</view>
				</view>
				<view class="item flex flex-between align-center">
					<view class="left">{{ $t("user.calling.no") }}</view>
					<view class="right">LFMA P22C 5A02 0760C</view>
				</view>
				<view class="item flex flex-between align-center">
					<view class="left">{{ $t("user.calling.enum") }}</view>
					<view class="right">F930988</view>
				</view>
				<view class="item flex flex-between align-center">
					<view class="left">{{ $t("user.calling.registerdate") }}</view>
					<view class="right">2010{{ $t("user.calling.year") }}</view>
				</view>
			</view>
			<view class="imgList flex flex-between mt30">
				<view class="item">
					<image class="img" src="/static/images/banner1.jpg" mode="aspectFill"></image>
					<view class="text">{{ $t("user.calling.home") }}</view>
				</view>
				<view class="item">
					<image class="img" src="/static/images/banner2.jpg" mode="aspectFill"></image>
					<view class="text">{{ $t("user.calling.second") }}</view>
				</view>
			</view>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { onReady } from "@dcloudio/uni-app";
import { useApp, useCool, useStore } from "/@/cool";
import { useUi } from "/$/cool-ui";
import { useI18n } from "vue-i18n";
const { locale } = useI18n();
const { t } = useI18n();
const { router, upload } = useCool();
const { user } = useStore();
const ui = useUi();
const app = useApp();

const more = () => {
	router.push("/pages/user/callingCard/edit");
};
</script>

<style lang="scss" scoped>
.page-info {
	.list {
		width: 100%;
		background: #ffffff;
		padding: 0 30rpx;
		box-sizing: border-box;

		.item {
			height: 88rpx;
			border-bottom: 1rpx solid #e5e5e5;

			&:last-child {
				border-bottom: none;
			}

			.left {
				font-family: SourceHanSansCN;
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
			}

			.right {
				font-family: SourceHanSansCN;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
			}
		}
	}

	.imgList {
		padding: 30rpx;
		box-sizing: border-box;
		background: #fff;

		.item {
			width: 330rpx;

			.img {
				height: 240rpx;
				width: 100%;
				border-radius: 10rpx;
			}

			.text {
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
				line-height: 32rpx;
				border-left: 4rpx solid #1881f7;
				text-indent: 16rpx;
				margin-top: 20rpx;
			}
		}
	}
}
</style>
